<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8>
    <style type="text/css">
        #rect {
            width: 120px;
            height: 100px;
            background-color: black;
            /*补全代码*/
            animation: rect 10s linear infinite;
        }

        @keyframes rect {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <!-- 补全代码 -->
    <div id="rect"></div>
    <input id="range" type="range" min="1" max="10" step="1" value="1" />
    


    <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">
        
        必知必会 

        document.querySelector("#range").onchange = function () {
            let inputVal = document.querySelector('#range').value;
            let time = 10 - inputVal + 1;
            let rect = document.querySelector("#rect");
            rect.style.animationDuration = time + 's';
        }
    </xmp>



    <script type="text/javascript">
        document.querySelector("#range").onchange = function () {
            let inputVal = document.querySelector('#range').value;
            let time = 10 - inputVal + 1;
            let rect = document.querySelector("#rect");
            rect.style.animationDuration = time + 's';
        }
    </script>
</body>

</html>